<template>
	<view>
		<van-search class="search" v-model="keyword" @search="onSearch" shape="round" placeholder="请输入搜索关键词" />
		<view class="box">
			<view class="tabbox">
				<view class="liaol" @tap="tabboxCiks('normal')" :class="sort == 'normal' ? 'weight' : ''">综合推荐</view>
				<view class="liaol" @tap="tabboxCiks('sales')" :class="sort == 'sales' ? 'weight' : ''">销量</view>

				<view class="jiag" @tap="tabboxCiks('price', sort == 'desc' ? 'asc' : 'desc')"
					:class="sort == 'desc' || sort == 'asc' ? 'weight' : ''">
					<view>价格</view>
					<view class="updown">
						<van-icon size="8" name="arrow-up" :color="sort == 'asc' ? '#333333' : '#999999'" />
						<van-icon size="8" name="arrow-down" :color="sort == 'desc' ? '#333333' : '#999999'" />
					</view>
				</view>
			</view>

			<view class="content">
				<view class="item" v-for="item in productList"
					@click="navTo(`/long/productDetail/productDetail?id=${item.id}`)">
					<image class="img" :src="baseUrl + item.images" mode="aspectFill"></image>
					<view class="textbox">
						<view class="title">{{ item.title }}</view>
						<view class="jiage" v-if="item.vip_price > 0 || item.market_price > 0">会员价:
							<text class="vipPrice">¥{{ item.vip_price }}</text>
							<text class="price">¥{{ item.market_price }}</text>
						</view>
						<view class="jiage" v-else>
							<text class="vipPrice" style="font-size: 26rpx;">验证后可查看产品价格</text>
						</view>
						<view class="yishou">已售{{ item.sales || 0 }}份</view>
					</view>
				</view>
			</view>
			<van-empty description="暫无数据" v-if="productList.length == 0" />

		</view>
	</view>
</template>

<script>
	import {
		getGoodsList
	} from "@/api/api.js"
	import baseUrl from "@/api/baseUrl";
	export default {
		data() {
			return {
				baseUrl,
				dropdownOption: [{
						text: "综合推荐",
						value: 1
					}, {
						text: "七天无理由",
						value: 2
					}, {
						text: "退货包运费",
						value: 3
					},
					{
						text: "极速退款",
						value: 4
					}
				],
				dropdownValue: 1,
				productList: [],
				main_type: '',
				keyword: '',
				page: 1,
				limit: 50,
				sort: 'normal'
			}
		},
		onLoad(options) {
			this.main_type = options.main_type
			uni.setNavigationBarTitle({
				title: this.main_type == 1 ? '家用医疗产品' : '孕婴商品'
			});
			this.serve()
		},
		methods: {
			tabboxCiks(s, o) {
				this.sort = o;
				let data = {
					sort: s,
					order: o || 'desc'
				};
				console.log('data', data)
				// this.shopList(data);
				this.serve(data);
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			onSearch(e) {
				this.keyword = e.detail
				this.serve()
			},
			serve(params) {
				let data = {
					main_type: this.main_type,
					keyword: this.keyword,
					page: this.page,
					limit: this.limit,
					// sales: this.sales
					...params
				}
				getGoodsList(data).then(res => {
					if (res.code == 1) {
						this.productList = res.data.list
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.weight {
		font-weight: bold !important;
	}

	.search {
		width: 100%;
	}

	.box {
		.tabbox {
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
		}

		.van-dropdown-menu {
			background-color: transparent;
			box-shadow: none;
			color: #333333;
			font-size: 28rpx;
		}

		.van-dropdown-menu__title {
			padding: var(--dropdown-menu-title-padding, 0 24px 0 0);
		}

		.liaol {
			font-size: 26rpx;
			color: #5C5C5C;
			// margin-left: -85rpx;
			width: 110rpx;
		}

		.jiag {
			font-size: 26rpx;
			color: #5C5C5C;
			display: flex;
			align-items: center;
			column-gap: 8rpx;

			.updown {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx;
		background: #F8F7F7;
		padding: 20rpx;
		flex-wrap: wrap;
		row-gap: 20rpx;

		.item {
			display: flex;
			flex-direction: column;
			width: 48%;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 20rpx;

			.img {
				width: 345upx;
				height: 398upx;
			}

			.textbox {
				padding: 15rpx 20rpx;
				display: flex;
				flex-direction: column;
				row-gap: 10rpx;

				.title {
					font-size: 28rpx;
					color: #333333;
				}

				.jiage {
					color: #FF6200;
					font-size: 22rpx;

					.vipPrice {
						font-size: 28rpx;
						margin-right: 10rpx;
					}

					.price {
						color: #A2A2A2;
					}
				}

				.yishou {
					font-size: 22rpx;
					color: #CCCCCC;
				}
			}
		}
	}
</style>